"use client"

import { ProductCard } from "./product-card"
import { useLanguage } from "@/context/language-context"

export function ProductGrid() {
  const { dictionary } = useLanguage()

  const products = [
    {
      name: dictionary.product1Name,
      price: dictionary.product1Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
    {
      name: dictionary.product2Name,
      price: dictionary.product2Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
    {
      name: dictionary.product3Name,
      price: dictionary.product3Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
    {
      name: dictionary.product4Name,
      price: dictionary.product4Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
    {
      name: dictionary.product5Name,
      price: dictionary.product5Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
    {
      name: dictionary.product6Name,
      price: dictionary.product6Price,
      imageSrc: "/placeholder.svg?height=400&width=400",
    },
  ]

  return (
    <section className="py-12 md:py-20 bg-gray-50 dark:bg-gray-900">
      <div className="container mx-auto px-4 md:px-6">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-gray-900 dark:text-gray-50">
          {dictionary.ourProducts}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {products.map((product, index) => (
            <ProductCard key={index} name={product.name} price={product.price} imageSrc={product.imageSrc} />
          ))}
        </div>
      </div>
    </section>
  )
}
